<template>
  <section class="home">
    <!-- <p style="padding:0 10px;margin:0;">热门活动 <span style="float:right;color:#dedede;">{{ current + 1 }}/{{bannerList.length}}</span></p>
    <van-swipe @change="onChange" :show-indicators="false">
      <van-swipe-item v-for="(banner, index) in bannerList" :key="index">
        <div class="banner"><img :src="banner" alt=""></div>
      </van-swipe-item>
    </van-swipe> -->
    <van-button type="primary" size="large" style="margin:0 auto;" @click="answer">开始</van-button>
    <van-button type="danger" size="large" style="margin:0 auto;" @click="stop">暂停</van-button>
    <van-circle
      v-if="showCircle"
      v-model="currentRate"
      :speed="parseInt(100/(totalSecond+1))"
      :text="remainSeconds.toString()"
    />
    
    <section class="question-item">
      <div class="answer-item"></div>
      <div class="answer-item"></div>
      <div class="answer-item"></div>
      <div class="answer-item"></div>
    </section>
  </section>
</template>

<script>
export default {
  data () {
    return {
      // 总计时
      totalSecond: 4,
      // 剩余时间 
      remainSeconds: 0,
      // 当前进度百分比
      currentRate: 0,
      // 暂停时 剩余时间
      pauseRemainSeconds: '',
      // 暂停时 进度百分比
      pauseRemainRate: '',
      // 定时器
      timer: undefined,
      // 是否显示进度
      showCircle: false,
      questionList: [1,2,3,4,5,6,7,8,9,10]
      // current: 0,
      // bannerList: ['http://api.crc360.cn/cms.crc360.cn/imgonline/icon/md5/0d/0d36801821a42d270cc9941b418a5dd8.jpg', 'http://api.crc360.cn/cms.crc360.cn/imgonline/icon/md5/a0/a09ff37b7c4d8ee076d54ec3700589b3.jpg']
    }
  },
  watch: {
    currentRate () {      
      if(this.currentRate == 100){
        clearInterval(this.timer)
        this.showCircle = false
        this.currentRate = 0
        this.remainSeconds = '0'
      }
    }
  },
  created () {
    // this.getUserData()
    console.error(JSON.stringify(this.questionList))
    this.shuffle(this.questionList)
    console.error(JSON.stringify(this.questionList))
  },
  methods: {
    // Fisher–Yates 费雪耶兹 洗牌算法
    shuffle(arr) {
      let i = arr.length;
      while (i) {
          let j = Math.floor(Math.random() * i--);
          [arr[j], arr[i]] = [arr[i], arr[j]];
      }
    },
    answer () {
      this.showCircle = true
      this.remainSeconds = this.totalSecond
      this.timer = setInterval( () => {
        if(this.remainSeconds>0) {
          this.remainSeconds = this.remainSeconds -1
        }
      },1000)
    },
    stop () {

    },
    getUserData () {
    },
    onChange (index) {
      this.current = index
    }
  }
}
</script>
<style>
.option-item {
  width:100px;
  height:40px;
  background-color:#dedede;
}
</style>

